<script>
import {defineComponent} from 'vue'
//引入showInfoVue 组件
import showInfoVue from './components/showInfo.vue'

export default defineComponent({
  // name属性：用于显式声明组件展示时的名称。
  name: "App",
  //data函数：用于声明组件初始响应式状态的函数(必须return一个新对象)
  data() {
    return {
      person: {
        name: "陶品奇",
        age: 22,
        address: "湖南省"
      },
      numbers: [1, 2, 3, 4, 5]
    }
  },
  // components：一个对象，用于注册对当前组件实例可用的组件
  components: {
    showInfoVue
  },
})
</script>

<template>
  <div class="app">
    <!--给showInfo组件，使用v-bind:动态绑定person属性和numbers属性，其中的numbers和person的值来源于组件实例中的data-->
    <showInfoVue :person="person" :numbers="numbers"></showInfoVue>
  </div>
</template>

<style lang="less"></style>
